<template>
    <transition name="modal-fade">
      <div v-if="showFlag" class="myModal">
        <div class="content">
          <div class="topBox">
            <div class="leftTitle">
              <span>{{ title }}</span>
            </div>
            <div class="rightClose" @click="cancelModal">x</div>
          </div>
          <slot name="content"></slot>
        </div>
      </div>
    </transition>
  </template>
  
  <script setup >
  import { ref, toRefs } from 'vue'
  
  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
  })
  

  
  // 是否开启弹框
  let showFlag = ref(false)
  
  // 开启
  const showModal = () => {
    showFlag.value = true
  }
  
  // 关闭
  const cancelModal = () => {
    showFlag.value = false
  }
  
  defineExpose({
    showModal,
    cancelModal,
  })
  </script>
  
  <style lang="scss" scoped>
  // 这个动画是，打开弹框时，有一个缓慢打开的效果
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  // 打开弹框时给它一个上下抖动的效果
  @keyframes shake {
    0% { transform: translateY(0); }
    25% { transform: translateY(-10px); }
    50% { transform: translateY(0); }
    75% { transform: translateY(10px); }
    100% { transform: translateY(0); }
  }
  
  .myModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
  
    animation: fadeIn 0.5s;
    // animation: fadeIn 0.5s, shake 0.5s;
  
    .content {
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translate(-50%, -50%);
      background: #ffffff;
      width: 500px;
      padding: 10px;
  
      .topBox {
        display: flex;
        height: 30px;
        border-bottom: 1px solid #f0f0f0;
        padding: 0 10px 0 0;
        margin-bottom: 20px;
        cursor: pointer;
  
        .leftTitle {
          flex: 1;
          text-align: left;
          color: rgba(0, 0, 0, 0.8);
          font-weight: 600;
          font-size: 16px;
        }
  
        .rightClose {
          flex: 1;
          text-align: right;
        }
      }
    }
  }
  
  // start - 效果为：关闭时，有一个缓慢消失的效果
  .modal-fade-enter-active, .modal-fade-leave-active {
    transition: opacity 0.5s;
  }
  .modal-fade-enter, .modal-fade-leave-to {
    opacity: 0;
  }
  // end - 效果为：关闭时，有一个缓慢消失的效果
  </style>
  
  
  